<template>
  <el-select v-model="selectedValue" @change="updateValue" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    ></el-option>
  </el-select>
</template>

<script>
import { ref, watch } from "vue";

export default {
  props: {
    modelValue: {
      type: String,
      default: "",
    },
    options: {
      type: Array,
      required: true,
    },
  },
  setup(props, { emit }) {
    const selectedValue = ref(props.modelValue);

    watch(
      () => props.modelValue,
      (newValue) => {
        selectedValue.value = newValue;
      }
    );

    const updateValue = (value) => {
      emit("update:modelValue", value);
    };

    return { selectedValue, updateValue };
  },
};
</script>
